<template>
	<view>
		<!-- 顶部-新闻 -->
		<view class="tab">
			<!-- 选项卡 -->
			<view class="tab_title">
				<!-- 可滚动式图 -->
				<scroll-view scroll-y="true" class="scroll_x">
					<view>
						<image style="width: 30rpx; height: 35rpx;" src="../../static/hu.jpg"></image>
					</view>
					<view>要闻</view>
					<view>推荐</view>
					<view>关注流</view>
					<view>24小时</view>
					<view>娱乐</view>
					<view>桂林</view>
					<view>财经</view>
					<view>生活</view>
					<view>科技</view>
					<view>军事</view>
					<view>体育</view>
					<view>汽修</view>
					<view>健康</view>
					<view>国际</view>
					<view>千里眼</view>
					<view>5G</view>
				</scroll-view>
			</view>
		</view>
		<view class="three">
			<view class="three-s">
				为您更新了15条内容
			</view>
		</view>
		<view class="twos">
			<view class="twoss">
				4 °C 小雨 桂林 PM2.59
			</view>
			<view class="left">
				<input type="text" style="width: 180rpx; margin-right: 20rpx; font-size: 25rpx;" placeholder="搜索关键词"
					class="search_input"></input>
			</view>
		</view>
		<view class="d-three">
			<view class="xw-three">
				<view>
					2020,我们温暖的记忆
				</view>
				<view class="threes">
					<view class="j">
						<text class="zd">置顶</text>
					</view>
					<view class="j">新闻联播</view>
					<view class="j">45评</view>
				</view>
			</view>
			<view class="xw-three">
				<view>森林大县57年大火是怎么做到的</view>
				<view class="threes">
					<view class="j">
						<text class="zd">置顶</text>
					</view>
					<view class="j">光明网</view>
					<view class="j">17评</view>
				</view>
			</view>
		</view>
		<!-- 新闻-1 -->
		<navigator url="">
			<view class="d-three">
				<view class="d-threes">
					<view>
						<image style="width: 200rpx; height: 160rpx;" src="../../static/bei.jpg">
						</image>
					</view>
					<view class="d-threess">几年近疯狂，涉案金额超3亿，一个“背包客”牵出全国跨省“倒烟”大案</view>
				</view>
				<view>
					<view class="threess">大河网 38评</view>
				</view>
			</view>
		</navigator>
		<!-- 新闻-2 -->
		<view class="d-three">
			<view class="d-threes">
				<view>
					<image style="width: 200rpx; height: 160rpx; " src="../../static/yang.jpg"></image>
				</view>
				<view class="d-threess">中国老年化水平加速，论养老保险在中国的重要性？人们应不应该买保险？</view>
			</view>
			<view>
				<view class="threess">新京报官微 58评</view>
			</view>
		</view>
		<view class="d-three">
			<view class="d-threes">
				<view>
					<image style="width: 200rpx; height: 160rpx;" src="../../static/kai.jpg"></image>
				</view>
				<view class="d-threess">人们都喜欢聚在一起玩耍，人们聚集在一起欢呼是好？是坏？</view>
			</view>
			<view>
				<view class="threess">烽火营 18评</view>
			</view>
		</view>
		<view class="d-three">
			<view>加微信交友群，喜欢就聊，找喜欢的人</view>
			<view class="d-threes">
				<view class="a">
					<image style="width: 200rpx; height: 160rpx;" src="../../static/R-C (1).jpg"></image>
				</view>
				<view>
					<image style="width: 200rpx; height: 160rpx;" src="../../static/R-C.jpg"></image>
				</view>
				<view>
					<image style="width: 200rpx; height: 160rpx;" src="../../static/R-C (2).jpg"></image>
				</view>
			</view>
			<view class="threess">广告 我主良缘文化</view>
		</view>
		<view class="d-three">
			<view class="d-threes">
				<view>
					<image style="width: 200rpx; height: 160rpx;" src="../../static/logo.png"></image>
				</view>
				<view class="d-threess">随着经济的发展，中国各个城市发展速度越来越快，经济发挥在那迅速，人们幸福快乐</view>
			</view>
			<view>
				<view class="threes">时代发展 8评</view>
			</view>
		</view>
		<view class="d-three">
			<view class="d-threes">
				<view>
					<image style="width: 200rpx; height: 160rpx;" src="../../static/logo.png"></image>
				</view>
				<view class="d-threess">随着经济的发展，中国各个城市发展速度越来越快，经济发挥在那迅速，人们幸福快乐</view>
			</view>
			<view>
				<view class="threes">时代发展 8评</view>
			</view>
		</view>
		<view class="d-three">
			<view class="d-threes">
				<view>
					<image style="width: 200rpx; height: 160rpx;" src="../../static/logo.png"></image>
				</view>
				<view class="d-threess">随着经济的发展，中国各个城市发展速度越来越快，经济发挥在那迅速，人们幸福快乐</view>
			</view>
			<view>
				<view class="threes">时代发展 3评</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {

			return {

			}

		},

		methods: {

		}

	}
</script>

<style>
	.search {
		display: flex;
		/*显示在一行，弹性布局*/
		flex-direction: row;
		/* 显示在一行，两个同事用才会显示在一行*/
	}
	.two {
		margin: 0rpx 40rpx 25rpx 30rpx;
		color: #ffffff;
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
	}
	.twos {
		color: #ffffff;
		display: flex;
		background-color: #dd524d;
		margin-top: -10rpx;
		width: 100%;
		justify-content: space-between;
		-webkit-justify-content: space-between;
		height: 70rpx;
	}
	.twoss {
		margin-left: 20rpx;
	}
	.reds {
		color: #dd524d;
		height: 40rpx;
	}
	.xw-three {}
	.three {
		width: 100%;
		height: 120rpx;
		background-color: #dd524d;
	}
	three-s {
		color: #ffffff
	}
	.d-threes {
		display: flex;
		/*显示在一行，弹性布局*/
		flex-direction: row;
		/* 显示在一行，两个同事用才会显示在一行*/
	}
	a {
		margin: 20rpx 10rpx 10rpx 20rpx;
	}
	.d-threess {
		margin-left: 30rpx;
	}
	.threes {
		display: flex;
		/*显示在一行，弹性布局*/
		flex-direction: row;
		/* 显示在一行，两个同事用才会显示在一行*/
		margin: 5rpx 10rpx 10rpx 10rpx;
		font-size: 25rpx;
		color: #808080;
	}
	.j {
		margin-right: 25rpx;
	}
	.threess {
		margin-bottom: 20rpx;
		font-size: 25rpx;
		color: #808080;
	}
	.search .left {
		flex: 1;
		/*自动适应宽度*/
		-webkit-dlex: 1;
		margin-right: 70rpx;
		/*左右间距*/
		height: 10rpx;
	}
	.search .right {
		width: 120rpx;
	}
	.search-input {
		background-color: #f8f8f8;
		/*背景颜色*/
		border-radius: 40rpx;
		/*设置边框圆角，半径*/
		padding: 5rpx 30rpx 6rpx 30rpx;
		/*内间距*/
		margin-right: 1rpx;
	}
	.search-img {
		height: 48rpx;
		/*设置高度*/
		width: 48rpx;
		/*设置宽度*/
	}
	/*========选项卡========*/
	.tab_title view {
		/*表示 tab_title下面所有的view都一样现实*/
		display: inline-block;
		/*在一行内显示*/
		margin-left: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		/*文字行高*/
		color: #ffffff;
	}
	.tab {
		background-color: #dd524d;
		height: 100rpx;
		position: fixed;
		/*固定位置设置新闻条的时候使用*/
		z-index: 1;
		/*县市层级，设置在最上面显示*/
		left: 0;
		right: 0;
		width: 100%;
		margin-top: 0rpx;
	}
	.zd {
		color: #dd524d;
	}
	.scroll_x {
		height: 60rpx;
		/*设置高度*/
		width: 100%;
		/*设置宽度*/
		white-space: nowrap;
		/*强制在一行内显示所有文本*/
	}
	/*隐藏导航条*/
	scroll-view::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}
	/*========新闻列表========*/
	.news_list {
		margin: 200rpx 25rpx 25rpx 25rpx;
		position: absolute;
		/*xx固定位置*/
		padding-bottom: calc(var(--window-bottom));
		/*防止被tabar挡住*/
		width: 100%;
	}
	.news_item {
		height: 150rpx;
		border-bottom: 1rpx solid #c8c7cc;
		/*添加下划线和定义下滑线颜色，宽度*/
		display: flex;
		flex-direction: row;
		margin-bottom: 20rpx;
		/*下间距*/
	}
	/*========设置左边图片大小========*/
	.news_list image {
		width: 180rpx;
		height: 140rpx;
		margin-right: 30rpx;
		/*图片与右外间距*/
	}
	.news_list .title {
		font-size: 35rpx;
		/*文字大小*/
	}
	.news_list .time {
		color: #c0c0c0;
		/*文字颜色*/
		font-size: 30rpx;
		/*文字大小*/
		margin-top: 15rpx;
		/*上设置内间距*/
	}
</style>
